<template>
    <div>
      <div class="container main">
        <div class="posid"><p>您当前位置：创业项目>提交项目需求</p></div>
        <div class="project-requirement">
          <p>友情提示：您提交的项目信息，部分内容将公开至xxxxxx网站，审核通过后，更多项目可以提供平台优质投资人查看.</p>
          <div class="table-msg">
            <el-form ref="form" :model="form" label-width="120px" :rules="rules" >
            <div>
              <h4>企业/团队信息<span>默认公开</span></h4>

                <el-form-item label="创业者类型" prop="resource">
                  <el-radio-group v-model="form.resource" >
                    <el-radio label="企业"></el-radio>
                    <el-radio label="团队"></el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="企业/团队名称" prop="name">
                  <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="活动性质" prop="type">
                  <el-checkbox-group v-model="form.type" >
                    <el-checkbox label="电子信息" name="type"></el-checkbox>
                    <el-checkbox label="互联网与移动互联网" name="type"></el-checkbox>
                    <el-checkbox label="人工智能（大数据，云计算）" name="type"></el-checkbox>
                    <el-checkbox label="新能源与节能环" name="type"></el-checkbox>
                    <el-checkbox label="保现代装备与先进制度 " name="type"></el-checkbox>
                    <el-checkbox label="新材料" name="type"></el-checkbox>
                    <el-checkbox label="生物医药" name="type"></el-checkbox>
                    <el-checkbox label="纳米技术" name="type"></el-checkbox>
                    <el-checkbox label="现代服务" name="type"></el-checkbox>
                    <el-checkbox label="其他" name="type"></el-checkbox>
                  </el-checkbox-group>
                </el-form-item>

            </div>
              <div>
                <h4>项目信息<span>默认公开，商业计划书和更多非必填信息除外</span></h4>
                <el-form-item label="项目图片" prop="pic">
                  <el-upload
                    action="https://jsonplaceholder.typicode.com/posts/"
                    list-type="picture-card"
                    :limit=5
                    accept='.png,.jpg,.jpeg'
                    :on-preview="handlePictureCardPreview"
                    :before-upload="beforeAvatarUpload"
                    :on-remove="handleRemove">
                    <i class="el-icon-plus"></i>
                    <div slot="tip" class="el-upload__tip">支持png,jpg，jpeg格式的图片，大小不要超过3M</div>
                  </el-upload>

                  <el-dialog :visible.sync="dialogVisible" size="tiny">
                    <img width="100%" :src="dialogImageUrl" alt="">
                  </el-dialog>
                </el-form-item>
                <el-form-item label="添加视频" class="video-upload">
                  <el-upload
                    class="avatar-uploader"
                    action="https://jsonplaceholder.typicode.com/posts/"
                    accept='.mp4,.qlv,.qsv,.ogg,.flv,.avi,.wmv,.rmvb'
                  :data="paramsdata"
                  :show-file-list="false"
                  :before-upload="beforeUploadVideo"
                  :on-success="handleVideoSuccess"
                  :on-progress="uploadVideoProcess">
                  <video
                    v-if="Video !='' && videoFlag == false"
                    :src="Video"
                    width="350"
                    height="180"
                    controls="controls"
                  >您的浏览器不支持视频播放</video>
                  <i
                    v-else-if="Video =='' && videoFlag == false"
                    class="el-icon-plus avatar-uploader-icon"
                  ></i>
                    <div slot="tip" class="el-upload__tip">支持mp4,avi，rmvb，大小不要超过2000MB</div>
                  <el-progress
                    v-if="videoFlag == true"
                    type="circle"
                    :percentage="videoUploadPercent"
                    style="margin-top:30px"
                  ></el-progress>
                  </el-upload>
                </el-form-item>
                <el-form-item label="项目名称" prop="name">
                  <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="项目描述" prop="desc">
                  <el-input type="textarea" v-model="form.desc" ></el-input>
                </el-form-item>
                <el-form-item label="融资类型" prop="resource">
                  <el-radio-group v-model="form.resource" >
                    <el-radio label="股权"></el-radio>
                    <el-radio label="债券"></el-radio>
                  </el-radio-group>
                </el-form-item>

                <el-form-item label="商业计划书" prop="pic">
                  <el-upload
                    class="upload-demo"
                    action="https://jsonplaceholder.typicode.com/posts/"
                    :on-change="handleChange"
                    :file-list="fileList">
                    <el-button size="small" type="primary">点击上传</el-button>
                    <div slot="tip" class="el-upload__tip">注：限pdf格式，文件大家不超过20m,改商业计划书可以提供给优质透支人查看，公式机密信息请提前做好 处理！</div>
                  </el-upload>
                </el-form-item>
              </div>
              <div>
                <h4>联系信息<span>默认不公开</span></h4>
                <div class="msg"><span style="margin-left: 55px">创始人信息</span><span style="margin-left: 330px">联系人信息</span></div>
                <el-form :inline="true" class="demo-form-inline" label-width="120px" >
                <el-form-item label="创始人" prop="name"  :inline="true" >
                  <el-input v-model="form.name"  style="width: 300px"></el-input>
                </el-form-item>
                <el-form-item label="联系人" >
                  <el-input v-model="form.name"  style="width: 300px"></el-input>
                </el-form-item>
                  <el-form-item label="手机" prop="name"  :inline="true" >
                    <el-input v-model="form.name"  style="width: 300px"></el-input>
                  </el-form-item>
                  <el-form-item label="手机" >
                    <el-input v-model="form.name"  style="width: 300px"></el-input>
                  </el-form-item>
                  <el-form-item label="邮箱" prop="name"  :inline="true" >
                    <el-input v-model="form.name"  style="width: 300px"></el-input>
                  </el-form-item>
                  <el-form-item label="邮箱" >
                    <el-input v-model="form.name"  style="width: 300px"></el-input>
                  </el-form-item>
                </el-form>
              </div>
              <div>
                <h4>联系信息<span>默认不公开</span></h4>
                <el-form-item label="是否有推荐人" prop="resource">
                  <el-radio-group v-model="form.resource" >
                    <el-radio label="是"></el-radio>
                    <el-radio label="否"></el-radio>
                  </el-radio-group>
                  <div  class="tip">如项目通过审核并参加路演，推荐人将有机会获得加分并取得相关特权。</div>
                </el-form-item>
              </div>
              <div style="text-align: center">
                <el-button type="primary" @click="submitForm('form')">保存</el-button>
                <el-button type="primary" >提交</el-button>
              </div>

            </el-form>
          </div>


        </div>
      </div>
    </div>
</template>

<script>
    export default {
        name: "StartupProject",
      data() {
        return {
          Video:'',
          videoFlag:false,      //刚开始的时候显示为flase
          videoUploadPercent: '0%',  //进度条刚开始的时候为0%
          paramsdata:{
            'img': 1  //添加其他参数
          },
          dialogImageUrl: '',
          dialogVisible: false,
          form: {
            name: '',
            region: '',
            date1: '',
            date2: '',
            delivery: false,
            type: [],
            resource: '',
            desc: ''
          },
          fileList:[],
          rules: {
            name: [
              { required: true, message: '企业/团队名称必填', trigger: 'blur' },
            ],
            resource: [
              { required: true, message: '创业者类型必填', trigger: 'change' },
            ],
            type: [
              { required: true, message: '活动性质必填', trigger: 'change' },
            ],
            desc: [
          { required: true, message: '企业/团队名称必填', trigger: 'blur' },
        ],
          }
        }
      },
      methods:{
        beforeUploadVideo(file) {          //视频上传之前判断他的大小
          const isLt10M = file.size / 1024 / 1024  < 2000;
          if (!isLt10M) {
            this.$message.error('上传视频大小不能超过2000MB哦!');
            return false;
          }
        },
        uploadVideoProcess(event, file, fileList){    //视频上传的时候获取上传进度传给进度条
          this.videoFlag = true;
          this.videoUploadPercent = parseInt(file.percentage);
          console.log(this.videoUploadPercent)
        },
        handleVideoSuccess(res, file) {           //视频上传成功之后返回视频地址
          this.videoFlag = false;
          this.videoUploadPercent = 0;
          console.log(res)
          this.Video = res.data[0];
        },
        beforeAvatarUpload(file) {
          console.log(file.type)
          const isJPG = file.type === 'image/png' || file.type === 'image/jpg'|| file.type === 'image/jpeg';
          const isLt2M = file.size / 1024 / 1024 < 3;

          if (!isJPG) {
            this.$message.error('上传头像图片只能是 jpg/png/jpeg 格式!');
          }
          if (!isLt2M) {
            this.$message.error('上传头像图片大小不能超过 3MB!');
          }
          return isJPG && isLt2M;
        },
          submitForm(formName) {
            this.$refs[formName].validate((valid) => {
              if (valid) {
                alert('submit!');
              } else {
                console.log('error submit!!');
                return false;
              }
            });

        },
        handleChange(file, fileList) {
          this.fileList = fileList.slice(-3);
        },
        handleRemove(file, fileList) {
          console.log(file, fileList);
        },
        handlePictureCardPreview(file) {
          this.dialogImageUrl = file.url;
          this.dialogVisible = true;
        }
      },
      created(){

      }
    }
</script>

<style scoped>
.project-requirement{
  background: #fff;
  padding: 20px 40px;
}
  .project-requirement p{
    font-size:12px;
    font-family:MicrosoftYaHei;
    font-weight:400;
    color:rgba(51,51,51,1);
    margin-bottom: 20px;
  }
.table-msg{
  margin-bottom: 30px;
}
  .table-msg h4{
    font-size:16px;
    font-family:MicrosoftYaHei;
    font-weight:400;
    color:rgba(21,117,249,1);
    padding-bottom: 15px;
    border-bottom: 1px #1575F9 solid;
  }
  .msg{
    display: flex;
    justify-content: right;
    margin-bottom: 20px;
  }
  .msg span{
    font-size:20px;
    font-family:MicrosoftYaHei;
    font-weight:400;
    color:rgba(51,51,51,1);
  }
  .tip{
    font-size:12px;
    font-family:MicrosoftYaHei;
    font-weight:400;
    color:rgba(224,224,224,1);
  }
.avatar-uploader-icon {
  background-color: #fbfdff;
  border: 1px dashed #c0ccda;
  border-radius: 6px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 148px;
  height: 148px;
  line-height: 146px;
  vertical-align: top;
}
</style>
